import React from 'react'
import {Pagination} from 'antd';
import {ConfigProvider} from 'antd';
import zh_CN from 'antd/es/locale/zh_CN';
// export default class Pagination_demo extends React.Component{
//     state={
//         theme:'dark',
//     }
//     changeTheme(value){
//         this.setState({theme:value?'dark':'light'})
//     }
//     render(){
//         let {theme}=this.state
//         return (
//             <div className="Pagination_demo">
//                 <h1>pagination分页</h1>
//             </div>
//         )
//     }
// }

export default function Pagination_demo(){
    return (
        <div className="Pagination_demo">
            <ConfigProvider locale={zh_CN}>
                <h1>pagination分页</h1>
                一般：
                <Pagination defaultCurrent={1} total={50}></Pagination>
                <hr/>
                有更多：
                <Pagination defaultCurrent={1} total={500}></Pagination>
                <hr/>
                每页显示几条：
                <Pagination showSizeChanger defaultCurrent={1} total={500} pageSize={20}></Pagination>
                <hr/>
                调至：
                <Pagination showQuickJumper  defaultCurrent={1} total={500} pageSize={20}></Pagination>
                <hr/>
                迷你：
                <Pagination defaultCurrent={1} total={50} size="small"></Pagination>
                <hr/>
                简洁：
                <Pagination defaultCurrent={1} total={50} simple></Pagination>
                <hr/>
                受控分页：
                <Pagination_demo2/>
                <hr/>
            </ConfigProvider>
        </div>
    )
}
class Pagination_demo2 extends React.Component{
    state={
        current:1,
    }
    onChange(page){
        console.log(page)
        this.setState({current:page})
    }
    render(){
        return <Pagination current={this.state.current} onChange={this.onChange.bind(this)} total={50} />;
    }
}